<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用input方式，配合img显示</title>
</head>
<body>
<!--HTML-->
<!--//-->
<!--//-->
<!--//        # 解析-->
<!--//        # accept 属性（允许上传两种文件类型：gif 和 jpeg）-->
<!--//        # capture 捕获到系统默认的设备，有三个参数值可设置  camera照相机； camcorder摄像机； microphone录音-->
<!--//        # js代码我做了封装, 参数一表示 "选择文件" 的 id，参数二表示 "显示图片" 的 id，-->
<!--//        # 若是 ios 只能调用摄像头，不能选择打开相册的话，就把这个【capture="camera"】去掉，直接加一个属性 multiple-->

<input id="fileBtn" type="file" onchange="upload('#fileBtn', '#img');" accept="image/*" capture="camera"/>
<img src="" id="img" width="200" height="200"/>



</body>
</html>
<script>

        var upload = function(c, d){
            "use strict";
            var $c = document.querySelector(c),
                    $d = document.querySelector(d),
                    file = $c.files[0],
                    reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e){
                $d.setAttribute("src", e.target.result);
            };
        };

/*        # 解析
        # 参数在上面 HTML 就已经讲解了，
        # file 表示你选中的那个图片，然后它里面有几个属性 name、size、type、slice等，也都非常实用，

        # FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
        # 调用 FileReader 的 readAsDataURL 接口，将启动异步加载文件内容，通过给 reader 监听一个 onload 事件，
        # 将数据加载完毕后，在onload事件处理中，通过 event 的 result 属性即可获得文件内容，然后扔进 img 的 src 即可 打开图片并预览。*/

















</script>